<template>
  <div>
    <!-- 轮播图 -->
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide>
        <div class="img">
          <img src="/index/1lunbo.png" />
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="img">
          <img src="/index/2lunbo.png" />
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="img">
          <img src="/index/3lunbo.png" />
        </div>
      </swiper-slide>
      <!-- 页码 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- 左右箭头 -->
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    <product-show />
  </div>
</template>
<script>
import ProductShow from "../components/ProductShow.vue";
export default {
  components: { ProductShow },
  data() {
    return {
      swiperOption: {
        //立方体切换效果 cube fade渐变 coverflow
        effect: "cube",
        loop: true,
        // 默认
        // autoplay: true,
        autoplay: {
          delay: 3000, //滚动时长
          disableOnInteraction: true,
        },
        //页数点
        pagination: {
          el: ".swiper-pagination",
          clickable: false,
        },
        // 左右箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        mousewheel: true,
      },
    };
  },
};
</script>
<style lang="scss" scoped   >
.swiper {
  margin-top: 100px;
  text-align: center;
}
.img {
  width: 100%;
  height: auto;
}
</style>
